import AigcCard from '@/components/AigcCard'
import AigcIcon from '@/components/AigcIcon'
import { APIKeyType } from '@/types'
import { dateToString, generateUUid } from '@/utils'
import { Button, Card, Input, Switch, Table, TableProps } from 'antd'
import React, { useCallback, useState } from 'react'

export default function ApiKey() {
  const apikeyColumns: TableProps['columns'] = [
    {
      key: 'APIkey',
      dataIndex: 'APIkey',
      title: 'APIkey',
      align: 'center'
    },
    {
      key: 'createDate',
      dataIndex: 'createDate',
      title: '创建时间',
      align: 'center',
      render: (text: string) => <>{dateToString(text, 'YYYY-MM-DD HH:MM:ss')}</>
    },
    {
      key: 'expiration',
      dataIndex: 'expiration',
      title: '到期时间',
      align: 'center',
      render: (text: string) => <>{dateToString(text, 'YYYY-MM-DD HH:MM:ss')}</>
    },
    {
      key: 'creator',
      dataIndex: 'creator',
      title: '创建者',
      align: 'center'
    },
    {
      key: 'enable',
      dataIndex: 'enable',
      title: '启用',
      align: 'center',
      render: (text: boolean) => {
        return (
          <>
            <Switch value={text} />
          </>
        )
      }
    },

    {
      key: 'options',
      dataIndex: 'options',
      align: 'center',
      title: '操作',
      render: (value: any, record: any, index: number) => {
        return (
          <div className="flex justify-center space-x-4 ">
            <div>
              <Button type="primary" onClick={() => delAPIkey(record)}>
                删除
              </Button>
            </div>
          </div>
        )
      }
    }
  ]
  const [apikeyDataSource, setApikeyDataSource] = useState<APIKeyType[]>([])
  const delAPIkey = useCallback((record: any) => {
    // console.log(record)
    setApikeyDataSource((arr) => {
      const index = arr.findIndex((obj) => obj.APIkey === record.APIkey)
      arr.splice(index, 1)
      const newArr: [] = []
      Object.assign(newArr, arr)
      // console.log(arr)
      return newArr
    })
  }, [])
  const generateAPIkey = useCallback(() => {
    const date = new Date()

    setApikeyDataSource((arr: any) => {
      const randomNum = parseInt(Math.random() * 10 + '')
      // console.log(randomNum)
      const apiKeyData: APIKeyType = {
        APIkey: generateUUid(),
        createDate: date,
        creator: 'hytime',
        expiration: new Date().getUTCMilliseconds() * 1000 * 60 * 60,
        enable: randomNum % 2 === 0 ? true : false
      }
      arr.push(apiKeyData)
      const newArr: [] = []
      Object.assign(newArr, arr)
      return newArr
    })
  }, [apikeyDataSource])
  return (
    <>
      <AigcCard>
        <div className="my-4">
          <div className="flex space-x-4 w-[160px] justify-center">
            <Button type="primary" onClick={generateAPIkey}>
              生成 APIkey
            </Button>
          </div>
        </div>
        <Table
          scroll={{ x: 800 }}
          rowKey={(record) => record.APIkey}
          columns={apikeyColumns}
          dataSource={apikeyDataSource}
        ></Table>
      </AigcCard>
    </>
  )
}
